<template>
  <client-only>
    <div class="body">
      <!-- 头部导航栏 -->
      <div class="seacher">
        <a href="/" class="tab">首页</a>
        <a href="/gameCategory" class="tab">分类</a>
        <a href="/personCenter" class="tab">个人中心</a>
        <input
          type="text"
          placeholder="搜索游戏"
          class="ipt"
          v-model="gameName"
        />
        <button class="btn" @click="search">🔍</button>
      </div>
      <!-- 搜索结束 -->
      <div class="box">
        <div class="left-tab">
          <ul>
            <li><a href="javascript:;" @click="initAll">所有分类</a></li>
            <li v-for="(item, index) in tag" :key="index">
              <a href="javascript:;" @click="tagSearchList(index + 1)">{{
                item
              }}</a>
            </li>
          </ul>
        </div>
        <!-- 右侧列表 -->
        <div class="right-content">
          <ul class="game">
            <li
              class="game-item"
              v-for="game in showList"
              :key="game.id"
              @click="goInfo(game.id)"
            >
              <a :href="'/gameCategory/' + game.id" class="game-img"
                ><img width="300" :src="game.firstImg" :alt="game.name"
              /></a>
              <div class="game-test">
                <a class="game-name" :href="'/gameCategory/' + game.id">
                  游戏名称：{{ game.name }}
                </a>
                <p class="game-type">
                  游戏标签：<a
                    href="#"
                    v-for="gameType in game.tab"
                    :key="gameType.id"
                    >{{ gameType }}</a
                  >
                </p>
                <p
                  class="game-intro"
                  v-html="`游戏简介：${game.introduce}`"
                ></p>
                <div class="price-box">
                  <div class="game-price">￥{{ game.price.toFixed(1) }}</div>
                  <div class="btn">
                    <button>
                      <a :href="'/gameCategory/' + game.id">购买</a>
                    </button>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div style="clear: both"></div>
      </div>
    </div>
  </client-only>
</template>

<script>
import gameInfoApi from "@/api/gameInfo";
import Cookies from "js-cookie";

export default {
  data() {
    return {
      gameList: {}, // 游戏列表
      showList: {}, // 游戏的分类数据
      gameName: "", //输入框的内容
      tag: [
        "养成游戏",
        "冒险游戏",
        "角色扮演游戏",
        "桌面软件工具",
        "动作游戏",
        "射击游戏",
        "格斗游戏",
        "策略游戏",
        "音乐游戏",
        "益智游戏",
        "竞速游戏",
        "体育游戏",
        "卡片游戏",
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化游戏列表
    init() {
      gameInfoApi.getGameList().then((res) => {
        this.gameList = res.data;
        this.initAll();
      });
    },
    // 全部分类
    initAll() {
      this.showList = this.gameList;
    },
    goInfo(gameId) {
      this.$router.push(`/gameCategory/${gameId}`);
    },
    // 搜索页面
    search(){
        Cookies.set('gameName',this.gameName)
      this.$router.push({path:'/search'})},
    // 点击按分类渲染页面
    tagSearchList(type) {
      if (type > 4) {
        return;
      }
      this.showList = this.gameList.filter((item) => item.gameType == type);
    },
}}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  color: #ddd;
}
.body {
  /* margin-top: -30px; */
  width: 100%;
  height: auto;
  background: #1b2838;
  /* margin-top: 3px; */
}
/* 头部导航栏 */
.seacher {
  width: 1200px !important;
  height: 30px !important;
  background-image: linear-gradient(to right, #317dbc, #1a377d);
  position: absolute;
  top: 120px;
  left: 160px;
  top: 40px;
  left: 170px;
  position: relative;
  z-index: 999;
}
.seacher .tab {
  display: inline-block;
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  text-decoration: none;
  color: #fffff1;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 2px 2px 5px black;
}
.seacher .tab:hover {
  background: #3080c0;
  height: 30px;
}
.seacher .ipt {
  width: 200px;
  height: 30px;
  border: none;
  background: #316282;
  color: #172f4f;
  padding-left: 15px;
  position: absolute;
  right: 0;
  border-radius: 5px;
}
.seacher .btn {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
  background: #55a0cc;
  border: none;
  border-radius: 5px;
}
.box {
  width: 1200px;
  margin: 60px auto 0;
  box-shadow: 0px 0px 200px #1b2838;
}
.box .left-tab {
  width: 18%;
  float: left;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.box .left-tab a {
  display: inline-block;
  width: 100%;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-bottom: 2px solid transparent;
  color: #2e5ebd;
}
.box .left-tab a:hover {
  background: #304c83;
  border-bottom: 2px solid #091834;
  color: #fff;
}
.box .right-content {
  width: 80%;
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.box .right-content .game li {
  width: 100%;
  height: 150px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px;
  margin-bottom: 10px;
  position: relative;
  cursor: pointer;
}

.box .right-content .game li:hover {
  background: rgba(255, 255, 255, 0.03);
}

.box .right-content .game li .game-img {
  display: inline-block;
  width: 500px;
  height: 150px;
  overflow: hidden;
}
.box .right-content .game li .game-test {
  width: 100%;
  padding: 5px 20px;
}
.box .right-content .game li .game-test .game-type > a {
  display: inline-block;
  color: #c2ec27;
  border: 1px solid #76c902;
  background: #4c6a21;
  border-radius: 3px;
  font-size: 12px;
  padding: 0 3px;
  margin: 0 3px;
}
.box .right-content .game li .game-test p {
  font-size: 14px;
  margin: 15px 0;
}
.box .right-content .game li .game-test .game-intro {
  display: -webkit-box; /*将元素设为盒子伸缩模型显示*/
  -webkit-box-orient: vertical; /*伸缩方向设为垂直方向*/
  -webkit-line-clamp: 2; /*超出3行隐藏，并显示省略号*/
  overflow: hidden;
  /*多行隐藏需要注意div的高度不能设置，让其自动3行隐藏即可*/
}
.box .right-content .game li .game-test .game-name {
  font-size: 20px;
  font-weight: 800;
  line-height: 36px;
}
.box .right-content .game li .game-test .game-name:hover {
  color: #4371cc;
  text-decoration: underline;
}
.box .right-content .game li .game-test .price-box {
  width: 150px;
  height: 40px;
  position: absolute;
  right: 30px;
  top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.box .right-content .game li .game-test .price-box .game-price {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #4c6a21;
  color: #c2ec27;
  font-size: 18px;
  width: 75px;
  line-height: 40px;
  padding-left: 5px;
}
.box .right-content .game li .game-test .price-box .btn button {
  border: 0;
  background: none;
  width: 75px;
  line-height: 40px;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
}
.box .right-content .game li .game-test .price-box .btn button:hover {
  background: rgb(0, 0, 0);
}
</style>